﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MejorValorados.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.MejorValorados" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Comercios mejor valorados</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" />
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type = "text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>   
    <link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css" /> 
    <script type="text/javascript" src="Content/bootstrap.min.js"></script>
<script type ="text/javascript">
    var Items = [];


    function cargarLista() {    
        
        $.ajax({
            type: "POST",
            url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/ComerciosMejorPuntuados") %>',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                jQuery.each(data, function (index, item) {                    
                    armarLista(item);
                });
            },
            error: SetTabSessionValueFailed
        });

    }

    function armarLista(item) {        
        if (item.length > 0) {
            for (var i = 0; i <= item.length; i++) {                
                $("#listado").append('<a href="#" class="list-group-item active"> ' +
                        '<h4 class="list-group-item-heading"><b>Nombre del comercio:    </b>' + item[i].ComercioNombre + "</h4> <br /> " +
                        '<p class="list-group-item-text"><b>Dirección:    </b>' + item[i].ComercioDireccion + "</p> <br /> " +
                        '<p class="list-group-item-text"><b>Telefono:    </b>' + item[i].ComercioTelefono + "</p> </a>");
            }
        }
    }
    function SetTabSessionValueFailed() {
        alert('call failed');
    }
</script>
    <style>
        #listado {
           position:relative;
           display:inline-block;
           width: 75%;
           height: 50%;
           left: 10%;       
        }
    </style>
    <style type="text/css">
html,body{
  	height:100%;
}
body{
       /* background-image: url(Imagenes/fondo.jpg);*/
    background-repeat:no-repeat;
  	padding-top:50px; /*padding for navbar*/
    width:100%;
}
#main, #main>.row {
	height:100%;
}
#main>.row {
    overflow-y:scroll;
}
#left {
	height:100%;
}
#map-canvas {
    max-width: none;
	width:65%;
    height:550px;
    position:absolute;
    right:16px;
    top:125px;
    bottom:0;
    overflow:hidden;
}
#resultsList {
    max-width: none;
	width:65%;
    height:550px;
    position:absolute;
    right:16px;
    top:125px;
    bottom:0;
    overflow:hidden;
}

.filter-box { 
  height: 15px; 
  width: 15px;  
  display: inline-block;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box; 
}

.filter-yellow { background-color: #FBF358; }
.filter-green { background-color: #00E13C; }
.filter-blue { background-color: #5781FC; }
.filter-purple { background-color: #7C54FB; }
.filter-red { background-color: #FB6353; }

canvas {-ms-touch-action: double-tap-zoom;}

hr{border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px blue;}



/* customize nav style */
.navbar-custom {
    background-color: #4b4b4b;
	font-weight:700;
    text-transform:uppercase;
    border-width:0;
}
.navbar-custom  .navbar-nav>li>a {
	color: #ddd;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a  {
	background-color: #7e7e7e;
}
.navbar-custom .dropdown-menu{
	right:0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
	border-top-color: #999;
	border-bottom-color: #999;
}

.navbar-collapse.in { /*3.0.2 bug workaround*/
    overflow-y: visible;
}

.navbar-toggle {
	outline:0;
}
    </style>


</head>
<body onload="cargarLista();">
      <!-- Static navbar -->
    <nav class="navbar navbar-custom navbar-fixed-top" id="nav">
      <div class="container">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
                <li ><a href="<%= Page.ResolveUrl("~/PaginaPrincipalBT.aspx") %>">Principal</a></li>
                <li><a href="<%= Page.ResolveUrl("~/BusquedaComerciosGeoreferenciado.aspx") %>">Posición</a></li>
                <li class="active"><a href="<%= Page.ResolveUrl("~/BusquedaComercios.aspx") %>">Busqueda ampliada</a></li>
                <li><a href="<%= Page.ResolveUrl("~/BusquedaComerciosCercanos.aspx") %>">Cercanos</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="<%= Page.ResolveUrl("~/Mantenimientos/Login.aspx") %>">Inicio Sesión</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav><br/><br/><br/>


    <br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Label ID="lblTitulo" runat="server" Text="Comercios mejor valorados" Font-Size="X-Large" Font-Bold="True"></asp:Label>    
    <br />
    <br />
    <br />
<div class="list-group" id="listado" runat="server" >
  
</div>
</body>
</html>
